<template>
    <container id="time-copy" class="time">
        <toolbar></toolbar>

        <el-card class="card">
            <el-row type="flex" align="middle">
                <el-col :span="16">
                    <span>当前时间：</span>
                    <span class="current-time" v-text="currentDateString"></span>
                    <el-button class="copy-btn" type="text" icon="el-icon-document-copy" size="mini"
                               @click="copyClick(currentDateString)"></el-button>

                    <span>当前时间戳：</span>
                    <span class="current-time" v-text="currentTimestamp"></span>
                    <el-button class="copy-btn" type="text" icon="el-icon-document-copy" size="mini"
                               @click="copyClick(currentTimestamp)"></el-button>
                </el-col>
                <el-col class="right" :span="8">
                    <span>时间格式化：</span>
                    <el-input class="format" v-model="format" size="mini"></el-input>
                    <el-button class="tip-btn" type="text" icon="el-icon-warning-outline" size="mini"></el-button>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="card">
            <el-row>
                <el-col :span="9">
                    <el-input v-model="timestamp" size="mini" placeholder="请输入时间戳" clearable></el-input>
                </el-col>
                <el-col class="center" :span="6">
                    <el-button type="success" size="mini" @click="toTimestampClick"><< 转换</el-button>
                    <el-button type="warning" size="mini" @click="toDateClick">转换 >></el-button>
                </el-col>
                <el-col :span="9">
                    <el-input v-model="date" size="mini" placeholder="请输入日期" clearable></el-input>
                </el-col>
            </el-row>
        </el-card>

    </container>
</template>

<script type="text/ecmascript-6">
  import Container from "../../components/common/Container";
  import Toolbar from "../../components/common/Toolbar";
  import dayjs from "dayjs";
  import customParseFormat from "dayjs/plugin/customParseFormat";
  import { clipboard } from "electron";

  /**
   * @author 白雨浓
   * @date 2019/7/9 17:06
   *
   * 时间相关
   **/
  export default {
    name: 'Time',
    components: {Toolbar, Container},
    data() {
      return {
        timer: null,
        currentDate: new Date(),
        format: 'YYYY-MM-DD HH:mm:ss',
        timestamp: '',
        date: '',
        copy: '',
      }
    },
    computed: {
      currentDateString() {
        return dayjs(this.currentDate).format(this.format);
      },
      currentTimestamp() {
        return dayjs(this.currentDate).valueOf();
      }
    },
    created() {
      dayjs.extend(customParseFormat);
    },
    mounted() {
      this.getCurrentDate();
    },
    methods: {
      getCurrentDate() {
        this.timer = setTimeout(() => {
          this.currentDate = new Date();
          this.getCurrentDate();
        }, 1000);
      },
      toDateClick() {
        this.date = dayjs(Number(this.timestamp)).format(this.format);
      },
      toTimestampClick() {
        this.timestamp = dayjs(this.date, this.format).valueOf();
      },
      copyClick(content) {
        clipboard.writeText(String(content));
        this.$message.success('复制成功');
      },
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .time {
    }

    .card {
        width 90%
        margin 20px auto
    }

    .current-time {
        border-radius 4px
        border 1px solid #DCDFE6
        padding 3px 8px
        font-size .9em
        margin-right 5px
        color #606266
    }

    .copy-btn {
        margin-right 15px
    }

    .info-btn {
        margin-left 10px
    }

    .tip-btn {
        margin-left 10px
    }

    .right {
        text-align right
    }

    .center {
        text-align center
    }

    .format {
        width 180px
    }
</style>
